<template>
  <div>
    <div class="commodity-box">
      <div class="main-img">
        <img :src="mainImg" />
      </div>
      <div>
        <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item style="top: -8px" class="position-relative">
              <el-popover placement="bottom-start" width="200" trigger="hover">
                <div>
                  <span></span>
                </div>
                <el-button size="mini" slot="reference">{{
                  commodity.name
                }}</el-button>
              </el-popover>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="child-inline-block title-bar">
            <span>{{ commodity.name }}</span>
            <span>共有{{ commodityTotal }}个产品</span>
          </div>
          <div>
            <haier-tag-filter
              v-for="(tag, index) in secondary"
              :label="tag.name"
              :items="tag.values"
              :key="index"
              @select="onTagSelect"
            >
            </haier-tag-filter>
          </div>
        </div>
        <div>
          <div class="commodity-header">
            <div
              v-for="(item, index) in filter"
              :key="index"
              :class="{
                'inline-block': true,
                'header-button': true,
                selected: currentFilter == index,
              }"
              @click="switchTab(index)"
            >
              <span>{{ item.label }}</span>
            </div>
            <div class="inline-block header-input">
              <input type="text" name="" />
              <span>-</span>
              <input type="text" name="" />
            </div>
            <div class="inline-block">
              <el-checkbox-group v-model="checkBox">
                <el-checkbox>智慧家电</el-checkbox>
                <el-checkbox>活动精选</el-checkbox>
                <el-checkbox>已下市</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="commodity-group child-inline-block">
            <div class="commodity-list">
              <template v-for="item in commoditys">
                <div
                  :key="item.cid"
                  class="commodity-info commodity inline-block"
                  @click="details(item)"
                >
                  <div>
                    <img src="" alt="" />
                  </div>
                  <div>
                    <span>{{ item.name }}</span>
                    <span>{{ item.cid.split("-")[0]}}</span>
                    <span>参考价: <span class="price">{{ item.price }}</span></span
                    >
                  </div>
                </div>
              </template>
            </div>
            <div class="commodity-recommend">
              <template v-for="(item, index) in recommends">
                <div :key="index" class="commodity-info block recommend">
                  <div>
                    <img src="" alt="" />
                  </div>
                  <div>
                    <span>{{ item }}</span>
                    <span>{{}}</span>
                    <span>价格</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div style="padding-top: 100px" v-if="pageTotal > 1">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="pageTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script scoped>
import TagSelect from "@/components/TagSelect.vue";


export default {
  data() {
    return {
      commodity: {},
      currentFilter: 0,
      pageTotal: 0,
      commodityTotal: 0,
      commoditys: [],
      recommends: [],
      checkBox: [],
      filter: [
        {
          label: "综合",
        },
        {
          label: "上市时间",
        },
        {
          label: "人气",
        },
        {
          label: "价格",
        },
      ],
      secondary: [],
      mainImg: "",
    };
  },
  methods: {
    show(type) {
      this[type] = true;
    },
    hidden(type) {
      this[type] = false;
    },
    onTagSelect(item) {
      console.log(item);
    },
    loadCommodity() {
      let { id } = this.$route.query;
      this.$haier
        .get("openapi/list/search", {
          topicId: id,
        })
        .then(({ data }) => {
          console.log(data);
          this.pageTotal = data.pageTotal;
          this.commoditys = data.items;
          this.commodityTotal = data.total;
          this.loadRecmmend(data.items == 0 ? 0 : data.items / 4);
        });
    },
    loadSecondary() {
      let { id } = this.$route.query;
      this.$haier.get("openapi/list/secondary", { id: id }).then(({ data }) => {
        console.log(data);
        this.secondary = data;
      });
    },
    loadRecmmend(count) {
      let { id } = this.$route.query;
      this.$haier
        .get("openapi/list/recommend", {
          filter: this.$arg({
            tag: [id],
          }),
          count: count || 1,
        })
        .then(({ data }) => {
          console.log(data);
          this.recommends = data;
        });
    },
    switchTab(index) {
      this.currentFilter = index;
    },
    loadAll() {
      this.commodity = this.$route.query;
      this.loadSecondary();
      this.loadCommodity();
    },
    details(item) {
      this.$router.push({
        path: "/haier/details",
        query: {
          cid: item.cid,
          tid: this.commodity.id,
          name: this.commodity.name,
        },
      });
    },
  },
  components: {
    "haier-tag-filter": TagSelect,
  },

  mounted() {
    this.$router.afterEach(() => this.loadAll());
  },
  created() {
    this.getAssets('main', 1).then(({data})=>{
      if(data.length < 0) return
      console.log(data)
      this.mainImg = this.$url(`openapi/assets/${data[0].content}?path=/`)
    })
    this.loadAll();
  },
};
</script>

<style scoped>
.commodity-box {
  margin-left: 10%;
  margin-right: 10%;
}

.main-img {
  height: 480px;
}

.title-bar {
  background: #fafafa;
  padding: 8px;
}

.title-bar > span:first-child {
  border-left: 5px #005aaa solid;
  padding-left: 20px;
  font-size: 1.5em;
  padding-right: 20px;
}

.title-bar > span:last-child {
  position: relative;
  bottom: 4px;
  font-size: 0.8em;
}

.commodity-header {
  position: relative;
  border: 1px rgba(128, 128, 128, 0.452) solid;
  height: 50px;
}

.commodity-header > div {
  height: inherit;
}

.commodity-header > div:last-child {
  position: absolute;
  right: 20px;
  top: 15px;
}

.header-input {
  position: absolute;
  height: inherit;
  padding-left: 20px;
}

.header-input > input,
.header-input > span {
  width: 80px;
  position: relative;
  top: 8px;
  padding: 0;
  margin: 0;
  outline: none;
  height: 30px;
}

.header-button {
  display: inline-block;
  width: 100px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-right: 1px rgba(128, 128, 128, 0.452) solid;
}

.header-button span {
  position: relative;
  top: 10px;
}

.selected {
  background-color: #005aaa;
  color: white;
}

.commodity-group::-webkit-scrollbar {
  width: 2px;
  background-color: rgba(0, 0, 0, 0.082);
}

.commodity-group::-webkit-scrollbar-track {
  border-radius: 10px;
}

.commodity-group::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.472);
  border-radius: 5px;
}

.commodity-group {
  width: 100%;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 20px;
}

.commodity-recommend {
  right: 0;
  width: 15%;
}

.recommend {
  width: 100%;
  border-top: 1px rgba(128, 128, 128, 0.404) solid;
  border-left: 1px rgba(128, 128, 128, 0.404) solid;
}

.commodity {
  width: 20%;
}

.commodity:hover,
.recommend:hover {
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.226);
}

.commodity-list {
  width: 85%;
}

.commodity-info {
  position: relative;
  text-align: center;
  padding: 25px;
  height: 350px;
}

.commodity-info > div:first-child {
  position: relative;
  height: 80%;
  width: 100%;
}

.commodity-info > div:last-child {
  position: relative;
  width: 100%;
  height: 20%;
}

.commodity-info > div:last-child > span {
  display: block;
  text-align: center;
}

.commodity-info > div:last-child > span:nth-child(1) {
  color: black;
}
.commodity-info > div:last-child > span:nth-child(2) {
  padding-bottom: 6px;
}

.commodity-info > div:last-child > span {
  color: rgba(128, 128, 128, 0.589);
}

.commodity-info:hover > div:last-child > span:nth-child(1){
  color: #005aaa;
}

.price{
  color: #005aaa;
}
.main-img{
  width: 100%;
  padding-bottom: 20px;
}

.main-img >img{
  width: 100%;
  height: inherit;
}


</style>